import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Tree, Select } from 'antd'

import Ajax from 'lib/Ajax'
import { getNewTreeData, findRowData, addRowData, removeRowData, confirmDelete, downloadFile } from 'lib/fun'
import { addConfig } from 'actions/config'
const FormItem = Form.Item;
const TreeNode = Tree.TreeNode;

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      selected: {},
      loading: true
    }
  }

  componentDidMount(){
  	const { config, addConfig } = this.props;
    if(!config.areaLevel){
      addConfig('areaLevel', 1);
    }
    this.onLoadData();
  }

  onSelect = (info, e) => {
    console.log(info);
    var selected = findRowData(this.state.treeData, info, 'areaId');

    // this.props.addressChange(selected);
    if(selected){
      this.setState({
        selected
      });
    }

    // e.node.onExpand();
    this.onLoadData(e.node);
  }

  onLoadData = (treeNode) => {
    var self = this;
    console.log('load area2');
    var selected = findRowData(this.state.treeData, treeNode?treeNode.props.eventKey:0, 'areaId');
    return new Promise((resolve) => {
      if(selected&&selected.children){
        self.setState({
          loading: false
        });
        resolve();
      }else{
        Ajax({
          url: '/area/list',
          data: {
            areaParentId: treeNode?treeNode.props.eventKey:0,
            perPage: 100
          },
          success: function(data){
            var treeData = self.state.treeData;
            if(treeNode&&self.state.treeData.length > 0){
              treeData = getNewTreeData(treeData, treeNode.props.eventKey, data.list, 'areaId');
            }else{
              treeData = data.list
            }
            self.setState({
              loading: false,
              treeData
            });
            resolve();
          },
          error: function(error){
            message.error(error);
          }
        });
      }
    });
  }

  output = ()=>{
    var self = this;
    downloadFile('/citizen/downCitizen', {
      areaId: this.state.selected.areaId
    }, {
      start: function(){
        self.setState({
          loading: true
        });
      },
      end: function(){
        self.setState({
          loading: false
        });
      },
    });
  }

  render() {
    const loop = data => data.map((item) => {
      if (item.children&&item.children.length > 0) {
        return <TreeNode title={item.areaName} key={item.areaId}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode title={item.areaName} key={item.areaId} isLeaf={item.children&&item.children.length == 0}/>;
    });
    const treeNodes = loop(this.state.treeData);
    return (
    	<Spin spinning={this.state.loading}>
        <Tree 
          ref="tree"
          autoExpandParent
          onSelect={this.onSelect} 
          loadData={this.onLoadData}
        >
          {treeNodes}
        </Tree>
        <Button disabled={this.state.selected.areaLevelCode&&(this.state.selected.areaLevelCode == "city"||this.state.selected.areaLevelCode == "province")||!this.state.selected.areaLevelCode} onClick={this.output} type="primary">导出人员</Button>
      </Spin>
    )
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addConfig }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(ModuleName)